<template>
  <keep-alive>
  <div id="projectList">
    <div class="titleTop">
      <div class="titleLeft">
        <i class="iconfont icontongyong_dangqianweizhi"></i>
        <span>项目</span>
        <i class="el-icon-arrow-right"></i>
        <span class="active">项目列表</span>
      </div>
      <div class="titleRight">
        <el-input placeholder="请输入项目名称" v-model="search" class="input-with-select" size="small">
          <el-button slot="append" icon="el-icon-search" @click="getdata(1)"></el-button>
        </el-input>
      </div>
    </div>
    <div class="filterQuery">
      <div class="tiao">
        <span class="label">发行方式：</span>
        <el-radio-group v-model="radioObj.radio1" size="small">
           <el-radio-button label>全部</el-radio-button>
          <el-radio-button label="单笔项目 "></el-radio-button>
          <el-radio-button label="储架式"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="tiao">
        <span class="label">发行场所：</span>
        <el-radio-group v-model="radioObj.radio2" size="small">
           <el-radio-button label>全部</el-radio-button>
          <el-radio-button label="银行 "></el-radio-button>
          <el-radio-button label="交易所"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="tiao">
        <span class="label">项目状态：</span>
        <el-radio-group v-model="radioObj.radio3" size="small">
          <el-radio-button label>全部</el-radio-button>
          <el-radio-button label="0">进行中</el-radio-button>
          <el-radio-button label="1">已归档</el-radio-button>
          <el-radio-button label="2">已关闭</el-radio-button>
        </el-radio-group>
      </div>
      <div class="newbtn" @click="xinzeng">
        <i class="iconfont iconxinzengxiangmu"></i>
        <span>新增项目</span>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="sNo" label="项目编号"  align="center"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"  align="center"></el-table-column>
        <el-table-column prop="pubMethod" label="发行方式" align="center"></el-table-column>
        <el-table-column prop="scale" label="应收账款规模" align="center"></el-table-column>
        <el-table-column prop="principal" label="项目负责人" align="center"></el-table-column>
        <!-- <el-table-column prop="setupTime" label="项目建立时间" align="center" :formatter="dateTable"></el-table-column> -->
        <el-table-column prop="createTime" label="项目建立时间" align="center" :formatter="dateTable"></el-table-column>
        <!-- <el-table-column prop="state" label="状态" align="center"></el-table-column> -->
        <el-table-column label="操作" align="center" width="160">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="look(scope.row)">查看</el-button>
            <el-button type="primary" size="mini" @click="modtify(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="prev, pager, next, jumper,total"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
  </keep-alive>
</template>
<script>
export default {
  name: "projectList",
  data() {
    return {
      search: "",
      radio: "",
      tableData: [],
      radioObj: {
        radio1: "",
        radio2: "",
        radio3: ""
      },
      currentPage: 1,
      total: null,
      obj: '',
      copyCurrerntpage: '',
      state: true
    };
  },
  created() {
    // this.getdata(1);
  },
  methods: {
    getdata(val) {
      this.currentPage = val;
      let obj = {
        pubMethod: this.radioObj.radio1,
        pubLocation: this.radioObj.radio2,
        state: this.radioObj.radio3,
        keyWord: this.search,
        page: this.currentPage,
        limit: 10
      };
      this.obj = obj;
      this.axios
        .get("AdminAPI/project/queryProject", {
          params: this.filterNoneObj(obj)
        })
        .then(({ data }) => {
          this.tableData = data.data;
          this.total = data.pageInfo.total;
        });
    },
    paramsGetdata () {
      let obj = JSON.parse(sessionStorage.getItem('xiugai'));
      if (obj)  {
        this.obj = obj;
        this.radioObj.radio1 = obj.pubMethod || '';
        this.radioObj.radio2 = obj.pubLocation || '';
        this.radioObj.radio3 = obj.state || '';
        this.search = obj.keyWord;
        this.currentPage = obj.page;
        this.axios
          .get("AdminAPI/project/queryProject", {
            params: this.filterNoneObj(obj)
          })
          .then(({ data }) => {
            this.tableData = data.data;
            this.total = data.pageInfo.total;
            sessionStorage.removeItem('xiugai');
          });
      } else {
        this.getdata(1);
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(val);
    },
    xinzeng() {
      this.$router.push("newProject");
    },
    look(row) {
      sessionStorage.setItem('swdypId', row.pId)
      this.$router.push({path: "projectHome", query: {pId: row.pId}});
    },
    modtify(row) {
      sessionStorage.setItem('xiugai', JSON.stringify(this.obj));
      this.$router.push({path: "moProject", query: {pId: row.pId}});
    }
  },
  watch: {
    radioObj: {
      handler(newName, oldName) {
          this.paramsGetdata();
      },
      deep: true
    }
  },
  beforeRouteEnter(to, from, next){
    next(vm=>{
      if(from.path=='/moProject' && sessionStorage.xiugai) {
        vm.paramsGetdata();
      } else {
        vm.getdata(1);
        sessionStorage.removeItem('xiugai');
      }
    })
  },
};
</script>

<style lang="scss">
#projectList {
  .filterQuery {
    margin-top: 10px;
    background: white;
    padding: 25px 108px 25px 40px;
    position: relative;
    .tiao {
      padding: 6px 0;
      .label {
        font-size: 20px;
        vertical-align: middle;
        color: #333333;
      }
      .el-radio-button__inner {
        border: none;
        padding: 6px 15px;
        font-size: 18px;
        border-radius: 0;
        margin-right: 15px;
      }
    }
    .newbtn {
      width: 184px;
      height: 64px;
      background: rgba(242, 146, 7, 1);
      border-radius: 15px;
      color: white;
      display: flex;
      justify-content: space-around;
      align-items: center;
      cursor: pointer;
      font-size: 20px;
      position: absolute;
      right: 108px;
      top: 50%;
      transform: translateY(-50%);
      i {
        font-size: 40px;
      }
      span {
        margin-left: -20px;
      }
    }
  }
  .table {
    margin-top: 10px;
    background: white;
    padding-top: 16px;
    .has-gutter tr th {
      background: #fefaf1;
    }
    .block {
      text-align: right;
      margin-right: 55px;
      height: 50px;
      margin-top: 20px;
    }
  }
}
</style>
